<template>
	<view class="pages-box rel">
		<!-- #ifndef H5 -->
		<uni-nav-bar :fixed="true" :shadow="false" :statusBar="true" title="公司充值" leftIcon="icon-left"
			color="#ffffff" :backgroundColor="primaryColor">
		</uni-nav-bar>
		<view :style="{height:`${configInfo.navBarHeight}px`}"></view>
		<!-- #endif -->
		<block v-if="detail.id">
			<view class="pd-lg ml-md mt-md mr-md fill-base radius-16">
				<view class="f-mini-title text-bold pb-lg ">充值金额</view>
				<view class="flex-y-center">
					<text class="f-paragraph text-bold pr-md">￥</text>
					<input v-model="param.price" style="height: 80rpx;" class="flex-1" type="digit" placeholder="请输入金额"/>
				</view>
				<view class="f-caption c-caption pt-lg">提示：当前余额为￥{{detail.balance}}</view>
			</view>
			<view class="pd-lg ml-md mt-md mr-md fill-base radius-16">
				<view class="f-mini-title text-bold pb-sm">支付方式</view>
				<block v-for="(item,index) in payment" :key="index">
					<view class="pay-item flex-between" @tap="payChange(index)">
						<view class="flex-center pay-item-icon rel">
							<view class="abs icon-bg" :style="{background: item.color}"></view>
							<i class="iconfont rel" :class="item.icon" :style="{color: item.color, zIndex: 1, fontSize: '20px'}"></i>
						</view>
						<view class="flex-1 f-paragraph text-bold pl-md">{{item.name}}</view>
						<i class="iconfont" :class="[{'icon-radio-fill' : payId == item.id}, {'icon-xuanze': payId != item.id}]" 
						:style="{color: payId == item.id? primaryColor : '#BEC3CE'}" style="font-size: 20px;"></i>
					</view>
				</block>
				<!-- <view class="flex-y-center pay-rule pb-sm">
					<i class="iconfont icon-xuanze" style="font-size: 20px;"></i>
					<text class="f-caption c-paragraph pl-sm">我已同意</text>
					<text class="f-caption text-bold" :style="{color: primaryColor}">《平台交易规则》</text>
				</view> -->
			</view>
			<fix-bottom-button @cancel="" @confirm="confirm" :text="[{text:'立即充值',type:'confirm',isAuth:false}]" bgColor="#fff"
				:classType="2">
			</fix-bottom-button>
		</block>
		
		<view class="space-footer"></view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	import siteInfo from '@/siteinfo.js';
	let timer = null
	export default {
		data() {
			return {
				detail: {},
				payment: [
					// {icon: 'iconweixin', name: '微信支付',color: '#19C865' ,id: 1}
				],
				payId: 2,
				param: {
					price: '',
					pay_model: 2
				},
				lockTap: false
			}
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			configInfo: state => state.config.configInfo
		}),
		async onLoad(options) {
			this.detail = this.$util.getPage(-1).detail
			if(this.configInfo.alipay_status == 1){
				this.payment.push({
					icon: 'iconzhifubao',name: '支付宝支付',color: '#0C76FF', id: 2
				})
			}
		},
		methods: {
			...mapActions(['getConfigInfo']),
			...mapMutations(['updatePoolItem', 'updateHomeItem']),
			payChange(index){
				this.payId = this.payment[index].id
				this.param.pay_model = this.payment[index].id
			},
			async confirm(){
				let {
					price = 0
				} = this.param
				let reg = /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/
				if(price == ''){
					this.$util.showToast({
						title: '请输入金额'
					})
					return
				}
				if (!reg.test(price)) {
					this.$util.showToast({
						title: '请输入正确的金额，最多2位小数'
					})
					return
				}
				if(this.configInfo.alipay_status != 1){
					this.$util.showToast({
						title: '请后台配置支付宝支付设置'
					})
					return
				}
				if (this.lockTap) return
				this.lockTap = true
				this.$util.showLoading()
				try{
					let {
						pay_list,
						order_id = 0
					} = await this.$api.user.rechargeOrder(this.param)
					console.log(pay_list ,'==========》 pay_list')
					this.$util.hideAll()
					// 微信/支付宝支付
					if (pay_list) {
						if (this.param.pay_model == 2) {
							pay_list = {
								orderInfo: pay_list,
								provider: 'alipay'
							}
						}
						try {
							await this.$util.pay(pay_list)
							this.$util.showToast({
								title: `支付成功`
							})
							setTimeout(() => {
								this.lockTap = false
								this.$util.goUrl({
									url: '1',
									openType: `navigateBack`
								})
							}, 1000)
						} catch (e) {
							this.$util.showToast({
								title: `支付失败`
							})
							setTimeout(() => {
								this.lockTap = false
							}, 1000)
						}
						return
					}
					// 余额支付/零元支付
					this.$util.showToast({
						title: `支付成功`
					})
					setTimeout(() => {
						this.lockTap = false
						this.$util.goUrl({
							url: '1',
							openType: `navigateBack`
						})
					}, 1000)
				}catch(e){
					setTimeout(() => {
						this.lockTap = false
						this.$util.hideAll()
					}, 2000)
				}
				
			}
		},
	}
</script>


<style lang="scss">
	.pages-box {
		.pay-item{
			margin-top: 40rpx;
			.pay-item-icon{
				width: 70rpx;
				height: 70rpx;
				border-radius: 70rpx;
				.icon-bg{
					width: 70rpx;
					height: 70rpx;
					border-radius: 70rpx;
					opacity: 0.1;
				}
			}
		}
	}
</style>
